<template>
    <div class="youKnowWrapper">
        <HandAni></HandAni>
        <div class="wrapper" :class="{smaller: isSmaller}">
          <div class="anim-box">
            <div class="stupid"></div>
            <div class="arrows"></div>
            <div class="cannon"></div>
            <div class="commander"
                 :style="{'background-image': 'url(' + comImg + ')', 'width': comWidth}"></div>
            <div class="cannonball" :class="{cannonballMove: showBall}" v-show="showBall"></div>
            <div class="btn" @touchend="toJie()"></div>
          </div>
        </div>
    </div>
</template>

<script>
    import commander from '../../img/youKnow/commander.png';
    import commander2 from '../../img/youKnow/commander2.png';
    import HandAni from './handAni.vue';
    export default {
        props: ['resources', 'pageType', 'jieImg'],
        data() {
            return{
                comImg: commander,
                comWidth: '2.96rem',
                showBall: false,
              isSmaller: false,
            }
        },
        mounted() {

          var clientWidth = document.documentElement.clientWidth;
          var clientHeight = document.documentElement.clientHeight;
          this.isSmaller = clientWidth/clientHeight > 0.66 ? true : false;
          console.log(clientWidth/clientHeight, this.isSmaller);

//            this.jieImg = 'youknowJie';
            setInterval(() => {
                this.comImg = this.comImg == commander ? commander2 : commander;
                this.comWidth = this.comWidth == '2.96rem' ? '3.2rem' : '2.96rem';
            }, 500);
            setTimeout(() => {
                this.showBall = true;
            }, 1000);
        },
        methods: {
            toJie() {
                console.log('jie', this.jieImg);
                this.$emit('update:jieImg', 'youknowJie');

                this.$emit('update:pageType', 'jie');
            }

        },
        components: {
            HandAni
        }
    }
</script>
<style lang="less" scoped>
    .youKnowWrapper{
        height: 100%;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        overflow: hidden;
        .wrapper{
            height: 100%;
            width: 100%;
            background-image: url("../../img/youKnow/youknowText.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center 90%;
            position: absolute;
          .anim-box {
            position: absolute;
            top: 0.3rem;
            width: 100%;
            height: 100%;
            .btn {
              width: 2.56rem;
              height: 2.56rem;
              position: absolute;
              left: 3.71rem;
              bottom: 1.9rem;
            }
            .stupid {
              width: 2.08rem;
              height: 0.53rem;
              position: absolute;
              bottom: 9.41rem;
              left: 0.56rem;
              background-image: url("../../img/youKnow/stupid.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .arrows {
              width: 1.08rem;
              height: 0.73rem;
              position: absolute;
              bottom: 8.89rem;
              left: 2.69rem;
              background-image: url("../../img/youKnow/arrows2.png");
              background-size: 100%;
              background-repeat: no-repeat;
              -webkit-animation: arrowsMove 0.8s infinite;
              animation: arrowsMove 0.8s infinite;
            }
            @keyframes arrowsMove {
              50% {
                left: 2.9rem;
                bottom: 8.7rem;
              }
            }
            @-webkit-keyframes arrowsMove {
              50% {
                left: 2.9rem;
                bottom: 8.7rem;
              }
            }

            .commander {
              height: 3.28rem;
              position: absolute;
              bottom: 6.3rem;
              right: 3.56rem;
              background-size: 100%;
              background-repeat: no-repeat;
            }

            .cannon {
              width: 2.56rem;
              height: 1.99rem;
              position: absolute;
              bottom: 6rem;
              left: 5rem;
              background-image: url("../../img/youKnow/cannon.png");
              background-size: 100%;
              background-repeat: no-repeat;
              -webkit-animation: cannonMove 1s;
              -o-animation: cannonMove 1s;
              animation: cannonMove 1s;
            }
            @keyframes cannonMove {
              0% {
                transform: scale(0.8);
              }
              25% {
                transform: scale(1);
              }
              50% {
                transform: scale(0.8);
              }
              75% {
                transform: scale(0.8);
              }
              100% {
                transform: scale(1);
              }
            }
            @-webkit-keyframes cannonMove {
              0% {
                transform: scale(0.8);
              }
              25% {
                transform: scale(1);
              }
              50% {
                transform: scale(0.8);
              }
              75% {
                transform: scale(0.8);
              }
              100% {
                transform: scale(1);
              }
            }

            .cannonball {
              width: 1.84rem;
              height: 1.44rem;
              position: absolute;
              bottom: 7.13rem;
              left: 7.67rem;
              background-image: url("../../img/youKnow/cannonball.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .cannonballMove {
              -webkit-animation: cannonballMove 1s infinite;
              animation: cannonballMove 1s infinite;
            }
            @keyframes cannonballMove {
              from {
                transform: scale(0);
                opacity: 0;
                left: 6.24rem;
                bottom: 6.97rem;
              }
              to {
                transform: scale(1);
                opacity: 1;
              }
            }
            @-webkit-keyframes cannonballMove {
              from {
                transform: scale(0);
                opacity: 0;
                left: 6.24rem;
                bottom: 6.97rem;
              }
              to {
                transform: scale(1);
                opacity: 1;
              }
            }
          }
        }
        .smaller{
            top: 1.1rem;
        }
    }
</style>
